// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group functions
////

/// 为盒子模型的一边创建内部阴影
///
/// @param {Keyword} $side - 出现阴影的边，可以是 `top`, `left`, `right` 或 `bottom`
/// @param {Number} $size - 目标边的宽度
/// @param {Color} $color - 阴影颜色
@mixin inner-side-shadow(
  $side: bottom,
  $size: 20px,
  $color: rgba($black, 0.25)
) {

  $helper: round($size * 0.65);

  @if ($side == top) {
    box-shadow: inset 0 $helper $size (-1)*$helper $color;
  } @else if ($side == left) {
    box-shadow: inset $helper 0 $size (-1)*$helper $color;
  } @else if ($side == right) {
    box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
  } @else if ($side == bottom) {
    box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
  }
}

/// 创建一个 CSS 三角形，可用于下拉箭头，下拉列表等。在 `&::before` 或 `&::after` 选择器中使用此 mixin 将三角形附加到现有元素
///
/// @param {Number} $triangle-size - 三角形宽度
/// @param {Color} $triangle-color - 三角形颜色
/// @param {Keyword} $triangle-direction - 三角形的指示方向。可以是 `top`, `right , 'bottom` 或 `left`
@mixin css-triangle(
  $triangle-size,
  $triangle-color,
  $triangle-direction
) {
  display: block;
  width: 0;
  height: 0;

  border: inset $triangle-size;

  content: '';

  @if ($triangle-direction == down) {
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: $triangle-color transparent transparent;
  }
  @if ($triangle-direction == up) {
    border-top-width: 0;
    border-bottom-style: solid;
    border-color: transparent transparent $triangle-color;
  }
  @if ($triangle-direction == right) {
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent $triangle-color;
  }
  @if ($triangle-direction == left) {
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent $triangle-color transparent transparent;
  }
}

/// 创建一个菜单图标，其中包含设置的宽度，高度，条形数和颜色。 mixin 使用图标的高度和条的重量来确定间距。 <div class =“docs-example-burger”> </ div>
///
/// @param {Color} $color [$black] - 图标颜色
/// @param {Color} $color-hover [$dark-gray] - 鼠标悬浮在图标上时的颜色
/// @param {Number} $width [20px] - 图标宽度
/// @param {Number} $height [16px] - 图标高度
/// @param {Number} $weight [2px] - 图标中各个条的高度
/// @param {Number} $bars [3] - 图标条的个数
@mixin hamburger(
  $color: $black,
  $color-hover: $dark-gray,
  $width: 20px,
  $height: 16px,
  $weight: 2px,
  $bars: 3
) {
  // 盒子阴影 CSS 输出
  $shadow: ();
  $hover-shadow: ();

  // 条形之间的间距是根据图标的总高度和每个条形的重量计算的
  $spacing: ($height - ($weight * $bars)) / ($bars - 1);

  @if unit($spacing) == 'px' {
    $spacing: floor($spacing);
  }

  @for $i from 2 through $bars {
    $offset: ($weight + $spacing) * ($i - 1);
    $shadow: append($shadow, 0 $offset 0 $color, comma);
  }

  // 图标容器
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: $width;
  height: $height;
  cursor: pointer;

  // 图标条
  &::after {
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 100%;
    height: $weight;

    background: $color;
    box-shadow: $shadow;

    content: '';
  }

  // 悬浮状态
  @if $color-hover {
    // 生成 CSS
    @for $i from 2 through $bars {
      $offset: ($weight + $spacing) * ($i - 1);
      $hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);
    }

    &:hover::after {
      background: $color-hover;
      box-shadow: $hover-shadow;
    }
  }
}

/// 添加一个向下的三角形作为元素的背景图像。图像格式化为SVG，可以轻松更改颜色。由于 Internet Explorer 不支持编码的 SVG 作为背景图像，因此还包括 PNG 备选方案
///
/// @param {Color} $color [$black] - 三角形颜色
@mixin background-triangle($color: $black) {
  $rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");

  @media screen and (min-width: 0 \0
  ) {
    @if lightness($color) < 60% {
      // 白色三角形
      background-image: url('');
    } @else {
      // 黑色三角形
      background-image: url('');
    }
  }
}

/// 使用由 Nicolas Gallagher 推崇的 micro clearfix hack。如果其子元素全部浮动，请将此 mixin 包含在容器中，使容器具有适当的高度。clearfix 使用特定样式进行扩充，以防止在 flexbox 环境中出现边框
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
@mixin clearfix {
  &::before,
  &::after {
    display: table;
    content: ' ';
    // 如果开启弹性盒子
    @if $global-flexbox {
      flex-basis: 0;
      order: 1;
    }
  }

  &::after {
    clear: both;
  }
}

/// 为“数量查询”选择器添加 CSS，该选择器根据容器内部的数量自动调整元素大小。
/// @link http://alistapart.com/article/quantity-queries-for-css CSS 的数量查询
///
/// @param {Number} $max - 最大项数。这个数字越高，每个项所需的 CSS 就越多
/// @param {Keyword} $elem [li] - 相邻选择器的标签
@mixin auto-width($max, $elem: li) {
  @for $i from 2 through $max {
    &:nth-last-child(#{$i}):first-child,
    &:nth-last-child(#{$i}):first-child ~ #{$elem} {
      width: percentage(1 / $i);
    }
  }
}

/// 检测到鼠标输入时，移除焦点的轮廓
@mixin disable-mouse-outline {
  [data-whatinput='mouse'] & {
    outline: 0;
  }
}

/// 使元素在视觉上隐藏，但仍可供键盘和辅助设备访问
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 隐藏可访问性内容
/// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
@mixin element-invisible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/// 反转 `element-invisible()` mixin 创建的 CSS 输出
@mixin element-invisible-off {
  position: static !important;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/// 将元素垂直居中于非静态元素内部
/// @link http://www.sitepoint.com/centering-with-sass/ 使用 Sass 居中
@mixin vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/// 将元素水平居中于非静态元素内部
/// @link http://www.sitepoint.com/centering-with-sass/ 使用 Sass 居中
@mixin horizontal-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/// 将元素绝对居中于非静态元素的内部
/// @link http://www.sitepoint.com/centering-with-sass/ 使用 Sass 居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/// 迭代 `$breakpoint-classes` 中定义的断点，并在每个断点的媒体查询中打印 mixin 中的 CSS。将其与网格或具有响应类的任何其他组件一起使用
///
/// @param {Boolean} $small [true] - 如果是 `false`，mixin 将跳过 `small` 断点。将它用于不使用 `small-`，只有 `medium-` 和 up 的类前缀的组件。
/// @param {Boolean} $auto-insert-breakpoints [true] - 如果为 `false`，则 mixin 将在不执行媒体查询的情况下迭代断点。对于在边距网格中生成更复杂的媒体查询非常有用
@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
  $list: $breakpoint-classes;

  @if not $small {
    $list: sl-remove($list, $-zf-zero-breakpoint);
  }

  @each $name in $list {
    $old-zf-size: null;
    @if global-variable-exists(-zf-size) {
      $old-zf-size: $-zf-size;
    }
    $-zf-size: $name !global;

    @if $auto-insert-breakpoints {
      @include breakpoint($name) {
        @content;
      }
    } @else {
      @content;
    }

    $-zf-size: $old-zf-size !global;
  }
}

/// 使用与断点相关的值 `$-zf-bp-value` 生成传递给 mixin 的 `@content`，具体取决于 `$name` 参数：
/// - 对于单个值，`$-zf-bp-value` 就是这个值
/// - 对于断点名称，`$-zf-bp-value` 是 `$map` 中对应的断点值
/// - 对于 “auto”，`$-zf-bp-value` 是 `$map`中相应的断点值，并传递给`@content`，它对 `$map` 的每个断点都有响应
/// @param {Number|Array|Keyword} $name [auto] - 要使用的单值，断点名称或断点名称列表。默认为 “auto”。
/// @param {Number|Map} $map - 断点和值的 Map 或要使用的单个值
@mixin -zf-breakpoint-value(
  $name: auto,
  $map: null
) {
  @if $name == auto and type-of($map) == 'map' {
    // "auto"
    @each $k, $v in $map {
      @include breakpoint($k) {
        @include -zf-breakpoint-value($v, $map) {
          @content;
        }
      }
    }
  } @else {
    // breakpoint name
    @if type-of($name) == 'string' {
      $name: -zf-get-bp-val($map, $name);
    }

    // breakpoint value
    $-zf-bp-value: $name !global;
    @content;
  }
}
